<template>
  <div class="tip-tap-editor" :style="styleObject">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      mode="simple"
    />
    <Editor
      style="height: 190px; overflow: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      mode="simple"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { select } from 'd3-selection'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { resetcutKeydown, shortcutKeydown } from '../shortcut-key'

const emits = defineEmits(['get-comment-html'])
const props = defineProps({
  currentNode: {
    type: Object,
    default: () => null
  }
})

const valueHtml = ref(props.currentNode?.data.comment)
const editorRef = shallowRef(null)
const toolbarConfig = {
  toolbarKeys: ['bold', 'italic', 'underline', 'bulletedList', 'numberedList']
}
const editorConfig = {
  placeholder: '请输入备注信息',
  autoFocus: true
}

function handleCreated (editor) {
  editorRef.value = editor
}

const styleObject = ref(null)
watch(() => props.currentNode, newVal => {
  if (newVal) {
    const windowHeight = document.body.clientHeight
    const id = newVal.data._id
    const node = select(`#${id}`).node()
    const { top, left, width, height } = node.getBoundingClientRect()
    styleObject.value = {
      top: (top + height + 300 > windowHeight ? top - 310 : top + height + 10) + 'px',
      left: left + width / 2 - 200 + 'px'
    }
  }
}, { immediate: true, deep: true })

onMounted(() => {
  resetcutKeydown()
})

onBeforeUnmount(() => {
  if (valueHtml.value !== props.currentNode?.data.comment) {
    emits('get-comment-html', valueHtml.value)
  }
  if (!editorRef.value) return
  editorRef.value.destroy()
  shortcutKeydown()
})
</script>

<style lang="scss">
.tip-tap-editor {
  width: 400px;
  box-shadow: 2px 6px 12px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 1200;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  .w-e-toolbar {
    padding: 6px;
    justify-content: center;
    .w-e-bar-item {
      height: auto;
      width: auto;
      padding: 2px;
      button {
        padding: 0 8px;
        font-size: 12px;
        height: 28px;
        svg {
          width: 12px;
          height: 12px;
          fill: #000;
        }
      }
    }
  }
  .w-e-text-container {
    padding: 0 8px 8px 0;
    [data-slate-editor] {
      padding: 0 16px;
      span {
        font-size: 13px;
      }
    }
    .w-e-scroll {
      &::-webkit-scrollbar-thumb {
        background-color: #ffffff00;
      }
      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: #f5f5f5;
        }
      }
      p {
        margin: 8px 0;
        line-height: 1;
      }
      input[type='radio'], input[type='checkbox'] {
        position: relative;
        top: 2px;
      }
    }
    .w-e-text-placeholder {
      left: 20px;
      top: 9px;
      font-style: normal;
      color: #999;
      font-size: 12px;
    }
  }
}
</style>
